<template>
  <div class="banner mb-16">
    <swiper
      :navigation="bannerArray.length > 1"
      :space-between="30"
      :allow-touch-move="false"
      :speed="500"
      class="banner_swiper"
    >
      <swiper-item v-for="(item, index) in bannerArray" :key="index">
        <img
          class="banner-img img-cover"
          :src="item.imageUrl"
          alt=""
          @click.stop="bannerJump(item)"
        />
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },

  computed: {
    bannerArray() {
      const list = this.list || [];
      return list.length === 2 ? [...list, ...list] : list;
    }
  },

  methods: {
    bannerJump(obj) {
      // type = 3 不做跳转
      if (obj.type !== 3) {
        // 跳转第三方链接
        if (obj && obj.pageType === 4) {
          window.open(obj.url);
        } else {
          this.$router.push({
            path: this.localePath('/m/download', this.$i18n.locale)
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.banner {
  padding: 0 16px;
  width: 100%;
  height: 226px;
}
.banner_swiper {
  width: 680px;
  height: 226px;
  border: 0.5px solid rgba(42, 60, 88, 0.1);
  border-radius: 8px;
  overflow: hidden;

  .banner-img {
    width: 680px;
    height: 226px;
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 8px;
  }
}
</style>
